<template>
    <div class="right">
        <div class="header">会员中心-我的竞赛</div>
        <div class="content">
            <div class="top" v-loading="oneLoading">
                <div class="headers">
                    <img src="@/assets/考试 (3)@2x.png" alt="">
                    竞赛考试
                </div>
                <div class="center">
                    <div class="center_left">
                        <div class="title">{{ competitionData.title }}</div>
                        <div class="des">{{ competitionData.des }}</div>
                    </div>
                    <div class="center_right" @click="begineXamination">开始考试</div>
                </div>
            </div>
            <div class="bottom" v-loading="twoLoading">
                <div class="items" v-for="(item, index) in list" :key="index">
                    <div class="items_top">
                        <div class="items_left">
                            <div class="left">[ {{ item.name }} ]</div>
                            <div class="title">{{ item.title }}</div>
                        </div>
                        <div class="items_right"
                            :style="{ background: item.status == '0' ? '#FF0000' : item.status == '1' ? ('#22AFE5') : ('#D76F00') }">
                            {{ item.status == '0' ? '未答题' : item.status == '1' ? ('打分中') : ('已打分') }}
                        </div>
                    </div>
                    <div class="items_bottom">
                        <!-- <div class="items_items">
                            <div class="items_left">
                                <div class="left">[ {{ item.name }} ]</div>
                            </div>
                            <div class="times">
                                报名时间：{{ item.startTime + ' - ' + item.endTime }}
                            </div>
                        </div> -->
                        <div class="items_items">
                            <div class="items_left">
                                <div class="left">[ {{ item.name }} ]</div>
                            </div>
                            <div class="times">
                                竞赛时间：{{ item.startTime + ' - ' + item.endTime }}
                            </div>
                        </div>
                        <div class="items_items" v-if="item.status == 2">
                            <div class="items_left">
                                <div class="left">[ {{ item.name }} ]</div>
                            </div>
                            <div class="times">
                                结果通知：将于{{ item.nextTime }}在{{ item.nextAddr }}，参加第二次线下考试，请及时到场
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="paginations">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getcompetitionjoined" :layout="'prev, pager, next'"
                    :prevText="'上一页'" :nextText="'下一页'" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { competitionnotStart, competitionjoined } from '@/api/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const oneLoading = ref(false)
const twoLoading = ref(false)
const competitionData = ref<any>({})
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const list = ref([])
const total = ref(0)
const getcompetitionnotStart = async () => {
    oneLoading.value = true
    const res = await competitionnotStart({})
    if (res.rows.length > 0) {
        competitionData.value = res.rows[0]
        competitionData.value.titleImage = import.meta.env.VITE_APP_PIC_URL + '/' + competitionData.value.titleImage
        competitionData.value.startTime = competitionData.value.startTime.split(' ')[0]
        const now = new Date().getTime()
        if (now >= new Date(competitionData.value.startTime).getTime()) {
            competitionData.value.des = '竞赛已经开始啦'
        } else {
            const timeDiff = Math.abs(now - new Date(competitionData.value.startTime).getTime());
            // 计算天数差值
            const daysDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
            competitionData.value.des = '还有' + daysDiff + '天开始考试啦'
        }
    } else {
        competitionData.value = {}
    }
    oneLoading.value = false
}
const getcompetitionjoined = async () => {
    twoLoading.value =  true
    const res = await competitionjoined(queryParams.value)
    res.rows.forEach(element => {
        element.startTime = element.startTime.replace(/-/g, "/")
        element.endTime = element.endTime.replace(/-/g, "/")
        element.nextTime = element.nextTime.replace(/-/g, "/")
    });
    list.value = res.rows
    total.value = res.total
    twoLoading.value = false
}
const begineXamination = () => {
    proxy?.$modal.msgWarning('暂未开放')
}
onMounted(async () => {
    getcompetitionnotStart()
    getcompetitionjoined()
});
</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        box-sizing: border-box;
        padding: 40px 0 0 0;
        color: #969696;

        .top {

            .headers {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #878787;

                img {
                    width: 24px;
                    height: 24px;
                }
            }

            .center {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 40px;

                .center_left {
                    .title {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 36px;
                        color: #000000;
                    }

                    .des {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #AFAFAF;
                        margin-top: 10px;
                    }
                }

                .center_right {
                    width: 140px;
                    height: 47px;
                    background: #22afe5;
                    border-radius: 10px 10px 10px 10px;
                    text-align: center;
                    line-height: 47px;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }

        .bottom {
            width: 100%;
            height: calc(100% - 224px);
            overflow: auto;

            .items {
                width: 100%;
                border-bottom: 1px solid #E6E6E6;
                padding: 25px 0;
                box-sizing: border-box;

                .items_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .items_left {
                        display: flex;
                        align-items: center;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #000000;

                        .title {
                            margin-left: 10px;
                        }
                    }

                    .items_right {
                        width: 89px;
                        height: 29px;
                        border-radius: 10px;
                        text-align: center;
                        line-height: 29px;
                        color: #fff;

                    }
                }

                .items_bottom {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #969696;
                    margin-top: 10px;

                    .items_items {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 10px;

                        .items_left {
                            display: flex;
                            align-items: center;
                            opacity: 0;

                            .title {
                                margin-left: 10px;
                            }
                        }

                        .times {
                            margin-left: 10px;
                        }
                    }
                }
            }
        }

        .paginations{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>